<template>
	<view class="home">
		<u-navbar title="首页" class="navHeader noFixed" :is-back="false" title-size="36" title-color="#333333"></u-navbar>
		<view class="title">
			砂梨田间适栽性评价系统
		</view>
		<view class="home-order">
			<image src="../static/home_order.png"></image>
		</view>
		
		<u-button type="primary" shape="circle" @click="onStart" :custom-style="startBtn">开始评测</u-button>
		<view class="home-tips">
			<view class="tip-title">
				温馨提示：
			</view>
			<view class="tip-content">
				1、判定砂梨的田间适栽性主要为以下几个方面，包括早实
				性、丰产性、黑星病抗性、黑斑/褐斑病抗性、腐烂/轮纹病抗
				性、抗虫性、抗涝性、农艺性状（矮化、自花结实等）以及胴
				枯病/白粉病抗性等。<br />
				2、评价系统的总分为100分，每个性状的得分为0-10分，其
				中砂梨的田间适栽性根据综合评分进行区分：优为≥80分；良
				为＜80分，且≥65分；中为＜65分，且≥50分；差为＜50
				分。
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			startBtn: {
				lineHeight: '96rpx',
				background: '#fff !important',
				color: '#00A1F2',
				fontSize: '36rpx'
			}
		};
	},
	methods: {
		onStart() {
			this.$u.route('/pages/scoringIndex')
		}
	}
}
</script>

<style lang="less" scoped>
.home {
	background: url('../static/bg.png') no-repeat center,
				url(../static/bg2.png) no-repeat center #00A1F2;
	background-size: contain;
	width: 100%;
	height: 100vh;
	padding: 0 48rpx;
}
.navHeader {
	/deep/.u-title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&.noFixed {
		// position: absolute;
		/deep/.u-title, /deep/.uicon-nav-back {
			color: #FFFFFF !important;
		}
		/deep/.u-navbar {
			background-color: transparent !important;
		}
	}
}
.title {
	padding-top: 80rpx;
	text-align: center;
	font-size: 48rpx;
	color: #fff;
}
.home-order {
	padding: 32rpx 0 80rpx;
	text-align: center;
	image {
		margin: 0 auto;
		width: 400rpx;
		height: 400rpx;
	}
}
.startBtn {
	line-height: 96rpx;
	background: #fff !important;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
	border-radius: 48rpx;
	color: #00A1F2 !important;
	font-size: 36rpx;
}
.home-tips {
	padding-top: 32rpx;
	padding-bottom: 32rpx;
	font-size: 24rpx;
	color: #ffffff;
	.tip-content {
		line-height: 40rpx;
		opacity: 0.6;
		padding-top: 24rpx;
	}
}
</style>
